<template>
	<view class="home">
		<view class="give" @click="navigation_address">
			<view class="give_song">送</view>
			<view class="content_give">{{Address_select_add}}</view>
			<view class="iconfont icon-jiantou"></view>
		</view>

		<view class="take" @click="showTree">
			<view class="take_qu">取</view>
			<view class="content_take" v-model="message.Address">{{message.Address}}</view>
			<view class="iconfont icon-xiangxiajiantou"></view>
		</view>

		<view class="take_address" v-show="show_address === true" :animation="animationData">
			<view class="" hover-class="take_Address_hover" v-for="item in address" :key="item.id" @click="selectAddress(item.id)">{{item.address}}</view>
		</view>

		<view class="type_code">
			<text class="type-name">快递类型:</text><input type="text" value="" v-model="message.type" placeholder="如:韵达快递" />
		</view>

		<view class="type_code">
			<text class="type-name">取件码:</text><input type="text" value="" placeholder="请输入取件码" v-model="message.pick_up_code" />
		</view>


		<!-- 备注区域 -->
		<view class="Notes">
			<view class="">备注信息:</view>
			<textarea value="" placeholder="(时间或者无接触配送等等,最多只能输入五十个字符哦)" maxlength="50" @input="Get_text" />
			</view>
		
		<!-- 规格区域 -->
		<view class="size">
			<view class="" style="margin-right: 6px;">规格(必选):</view>
			<radio-group @change="ChangeSize">
				<label class="size_item" v-for="(item,index) in specifications" :key="index">
					<view>
						<radio :value="item.value" :checked="index === current" />
					</view>
					<view>{{item.name}}</view>
				</label>
			</radio-group>
		</view>
		<view class="money">总价格:<text>{{message.money}}</text>元</view>
		
		
		<!-- 支付区域 -->
		<view class="giveMe_money">
			<view class="manner">
				支付方式
			</view>
			<view class="payment">
			    <radio-group class="payment_items" @change="radioChange">
			        <label class="payment_item" v-for="(item,index) in radioItems" :key="index">
			            <view>
			                <radio :id="item.name"  :value="item.name" :checked="item.checked"></radio>
			            </view>
			            <view>
			                <label class="payment_name" :for="item.name">
			                    <text>{{item.values}}</text>
			                </label>
			            </view>
			        </label>
			    </radio-group>
			</view>
		</view>
		
		<u-mask :show="show" @click="show = false" z-index="500">
			<view class="warp">
				<view class="rect" @tap.stop>
					<view class="rect_item1">
						<image src="../../static/icon/Error.png" mode="" @click="show = false"></image>
						<view class="">请输入支付密码</view>
					</view>
					<view class="rect_item2">长大跑腿</view>
					<view class="rect_item3">{{message.money}}元</view>
					
					<view @click="input_focus"><u-message-input :focus="true" :breathe="true" :dot-fill="true" width="43" style="margin-top: 40px;border: 1px solid #FFFFFF;" v-model="password" :disabled-keyboard="true" :maxlength="6"></u-message-input></view>
				</view>
			</view>
		</u-mask>
		
		<u-keyboard class="keyboard" ref="uKeyboard" mode="number" v-model="Show" :mask="false" :dot-enabled="false" @change="valchange" @confirm="finish" @backspace="backspace" z-index="50000"></u-keyboard>
		<button type="primary" class="money_button" @click="place_order">提交订单</button>
		
		<tki-tree ref="tkitree" :selectParent="selectParent" :multiple="multiple" :range="list" :foldAll="flod" rangeKey="name" @confirm="treeConfirm"
		 @cancel="treeCancel"></tki-tree>
		
	</view>
</template>

<script>
	import tkiTree from '@/pagesA/tki-tree/tki-tree.vue';
	let testList = [{
			id: 11,
			name: '汇泽食堂旁',
			children: [{
					id: 1,
					name: '菜鸟驿站',
					position: {
						x: '113.033552',
						y: '28.25256'
					}
				},
				{
					id: 2,
					name: '佰米智能',
					position: {
						x: '113.037334',
						y: '28.252568'
					}
				},
				{
					id: 3,
					name: '智能柜',
					position: {
						x: '113.034482',
						y: '28.253045'
					}
				},
				{
					id: 4,
					name: '韵达快递',
					position: {
						x: '113.034482',
						y: '28.253045'
					}
				}
			]
		},
		{
			id: 22,
			name: '西南门',
			children: [{
				id: 5,
				name: '(老校门)报刊亭',
				position: {
					x: '113.036423',
					y: '28.251792'
				}
			}, ]
		},
	]
	export default {
		components: {
			tkiTree
		},
		data() {
			return {
				list:[{
			id: 11,
			name: '汇泽食堂旁',
			children: [{
					id: 1,
					name: '菜鸟驿站',
					position: {
						x: '113.033552',
						y: '28.25256'
					}
				},
				{
					id: 2,
					name: '佰米智能',
					position: {
						x: '113.037334',
						y: '28.252568'
					}
				},
				{
					id: 3,
					name: '智能柜',
					position: {
						x: '113.034482',
						y: '28.253045'
					}
				},
				{
					id: 4,
					name: '韵达快递',
					position: {
						x: '113.034482',
						y: '28.253045'
					}
				}
			]
		},
		{
			id: 22,
			name: '西南门',
			children: [{
				id: 5,
				name: '(老校门)报刊亭',
				position: {
					x: '113.036423',
					y: '28.251792'
				}
			}, ]
		},

	],
				multiple: false,
				selectParent: false,
				flod: false,
				show_address:false,
				address: [{
						"id": 1,
						"address": '汇泽食堂旁菜鸟驿站',
						"position":{
							x:'113.033552',
							y:'28.25256'
						}
					},
					{
						"id": 2,
						"address": '汇泽食堂旁佰米智能',
						"position":{
							x:'113.037334',
							y:'28.252568'
						}
					},
					{
						"id": 3,
						"address": '汇泽食堂旁智能柜',
						"position":{
							x:'113.034482',
							y:'28.253045'
						}
					},
					{
						"id": 4,
						"address": '汇泽食堂旁韵达快递',
						"position":{
							x:'113.036881',
							y:'28.251172'
						}
					},
					{
						"id": 5,
						"address": '西南门(老校门)报刊亭',
						"position":{
							x:'113.036423',
							y:'28.251792'
						}
					}
				],
				specifications: [{
						value: "2",
						name: '小件 2元/件'
					},
					{
						value: "3",
						name: '中件 3元/件',
						checked: 'true'
					},
					{
						value: "5",
						name: '大件 5元/件'
					},
					{
						value: "10",
						name: '特大件 10元/件'
					}
				],
				current: 0,
				radioItems: [
					{
				        name: 'weixin',
				        values: '微信',
						checked: 'true'
				    },
				    {
				        name: 'zhifubao',
				        values: '支付宝'
				    }
				],
				message:{
					type:'',
					pick_up_code:'',
					select_order:'weixin',
					money:2,
					Address: '选择取件点',
					postion:'',
					Notes:'暂无备注信息哦'
				},
				User_number:'',
				Address_select_add:'请新增或选择地址',
				show: false,
				Show: false,
				password:'',
				password_num: 0,
				animationData:{},
				show_animation:false
			}
		},
		methods: {
			// 确定回调事件
			treeConfirm(e) {
				for (var i = 0; i < testList.length; i++) {
					var tItems = testList[i].children
					var itemname = testList[i].name;
					tItems.forEach((item, index) => {
					      var childrenItem = item
						e.forEach((eItem,eIndex)=>{
							if(childrenItem.id == eItem.id){
								this.message.Address = itemname + e[index].name
							}
							console.log(eItem.id);
						})
					})
				}
			},
			// 取消回调事件	
			treeCancel(e) {
				console.log(e)
			},
			// 显示树形选择器
			showTree() {
				this.$refs.tkitree._show();
			},
			async save_Take(){
				let path = 'saveTask';
				if(this.message.money == 2){
					this.message.size = '小'
				}
				else if(this.message.money == 3){
					this.message.size = '中'
				}
				else if(this.message.money == 5){
					this.message.size = '大'
				}
				else{
					this.message.size = '特大'
				}
				const res = this.$myRequest({
					url:`${path}?User_address=${JSON.stringify(getApp().globalData.add_Task)}&express=${JSON.stringify(this.message)}`   //JSON.stringify这个方法是将一个对象转换成一个字符串
				})
				let Temp = Promise.resolve(res);
				Temp.then((result)=>{
					getApp().globalData.All_Task = result.data.message;
				})
				uni.switchTab({
					url:'../../pages/order/order'
				})
			},
			if_show() {
				this.show_address = !this.show_address;
				// if(this.show_animation === false){
				// 	this.animation = uni.createAnimation();
				// 	this.animation.opacity(1).step({
				// 		delay:800,
				// 		timingFunction:"ease"
				// 	});
				// 	this.animationData = this.animation.export();
				// 	// this.animationData = {};
				// 	this.show_animation = true;
				// }else{
				// 	this.animation = uni.createAnimation();
				// 	this.animation.opacity(0).step({
				// 		delay:800,
				// 		timingFunction:"ease"
				// 	})
				// 	this.animationData = this.animation.export();
				// 	// this.animationData = {};
				// 	this.show_animation = false;
				// }
			},
			selectAddress(index) {
				for (let i = 0; i < this.address.length; i++) {
					if (this.address[i].id === index) {
						this.message.Address = this.address[i].address;
						this.message.position = this.address[i].position;
						break;
					}
				}
				// this.animation = uni.createAnimation();
				// this.animation.opacity(0).step({
				// 	delay:100,
				// 	timingFunction:"ease"
				// })
				// this.animationData = this.animation.export();
				this.show_address = false;
			},
			ChangeSize(evt) {
				this.message.money = evt.detail.value;
			},
			radioChange(e) {
				if(e == undefined){
					return this.message.select_order;
				}
			    this.message.select_order = e.target.value;
			},
			place_order(){
				this.radioChange();
				console.log(this.message.select_order,'qifeiqiiqiqi')
				if(this.message.Address == '选择取件点' || this.message.type == '' || this.message.pick_up_code == '' || this.message.Notes == '暂无备注信息哦' || this.message.Notes == ''){
					uni.showModal({
						title:'温馨提示',
						content:'你信息还未填充完整哦',
						showCancel:false
					})
					return;
				}
				this.show = !this.show;
				this.Show = true;
				// console.log(this.message.Address,this.message.select_order,this.message.type,this.message.pick_up_code)
			},
			Get_text(data){
				// console.log(data,'819819819819')
				// console.log(data.target.value);
				this.message.Notes = data.target.value;
			},
			navigation_address(){
				uni.navigateTo({
					url:'../../pagesB/common_address/common_address?number='+this.User_number
				})
			},
			input_focus(){
				this.Show = true;
			},
			valchange(e){
				if(this.password.length == 6){
					return;
				}
				this.password += e;
			},
			finish(){
				if(this.password.length < 6){
					this.Show = true;
					return;
				}
				
				if(this.password == '123456'){
					this.save_Take();
					console.log('点击完成')
					this.show = false;
					this.password = ''
				}
				
				
				else{
					uni.showModal({
						title:'提醒',
						content:'您输入的密码有误哦',
						showCancel:false,
						
						success:(res)=> {
							if(res.confirm){
								console.log('用户点击了确定按钮');
								this.password = '';
								this.show = true;
								this.Show = true;
							}
						}
					})
					this.show = false;
					this.Show = false;
				}
			},
			backspace(){
				if(this.password.length == 0){
					return;
				}
				this.password_num = this.password.length;
				this.password = this.password.substring(0,this.password_num -1);
				-- this.password_num;
				if(this.password_num == 0){
					return;
				}
			}
		},
		onLoad(options) {
			console.log(options)
			this.User_number = options.number;
			if(options.name && options.telephone){
				this.Address_select_add = options.name + '\xa0' + options.telephone;
			}
		},
		onShow(){
			// this.animation = uni.createAnimation({
			// 	duration:1000,
			// 	timingFunction:"ease",
			// 	delay:-1000
			// })
			// this.animation.opacity(0).step();
			// this.animationData = this.animation.export();
			uni.$on('emit_Address',(data)=>{
				console.log(data,'起飞起飞起飞')
				this.User_number = data.number;
				if(data.name && data.telephone){
					this.Address_select_add = data.name + '\xa0' + data.telephone;
				}
			})
		},
		onUnload() {
			this.animationData = {}
		}
	}
</script>

<style lang="scss">
	.home {
		width: 750rpx;
		font-size: 28rpx;
		padding: 20rpx 20rpx;
		box-sizing: border-box;//保证盒子不会被撑破
		position: relative;

		.give {
			display: flex;
			line-height: 80rpx;
			margin-bottom: 10rpx;
			
			.give_song {
				width: 50rpx;
				height: 50rpx;
				line-height: 50rpx;
				margin: auto 10rpx;
				margin-left: 20rpx;
				border-radius: 10rpx;
				font-size: 32rpx;
				text-align: center;
				background: #E80000;
				color: #FFFFFF;
			}
			
			.content_give {
				width: 550rpx;
				height: 28rpx;
				line-height: 80rpx;
			}
			
		
		}

		.take {
			display: flex;
			height: 80rpx;
			border-radius: 50rpx;
			
			.take_qu {
				width: 50rpx;
				height: 50rpx;
				line-height: 50rpx;
				margin: auto 10rpx;
				margin-left: 20rpx;
				border-radius: 10rpx;
				font-size: 32rpx;
				text-align: center;
				background: #33FF66;
				color: #FFFFFF;
			}
			
			.content_take {
				width: 550rpx;
				height: 28rpx;
				line-height: 80rpx;
			}
		}

		.take_address {
			position: fixed;
			z-index: 1000;
			width: 500rpx;
			height: 200px;
			border: 1px solid #C0C0C0;
			border-bottom-left-radius: 60rpx;
			border-bottom-right-radius: 60rpx;
			background: #000000;
			color: #FFFFFF;
			left: 60px;
			transition: height 10s;

			view {
				height: 80rpx;
				line-height: 80rpx;
				border-bottom: 1px solid #eee;
				margin-left: 10px;
			}
		}
		
		.take_Address_hover{
			background: #18B566;
			width: 200px;
			border-radius: 20px;
		}

		.type_code {
			display: flex;
			margin: 10rpx 20rpx 0 20rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-bottom: 2rpx solid #C0C0C0;
			
			.type-name{
				width: 150rpx;
				text-align: right;
				padding-right: 20rpx;
			}
			
			input {
				display: flex;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 28rpx;
			}
		}

	.size {
		margin: 0 20rpx;
		margin-top: 20rpx;
		color: #C0C0C0;
		display: flex;
	
		.size_item {
			display: flex;
			width: 380rpx;
			height: 90rpx;
			line-height: 90rpx;
			border-bottom: 1px solid #eee;
		}
	}
		
		.money{
			width: 400rpx;
			margin: 0 auto;
			margin-top: 10rpx;
			text-align: center;
			
			text{
				color: red;
			}
		}
		
		.Notes{
			display: flex;
			margin: 20rpx 20rpx 0;
			
			view{
				width: 150rpx;
				line-height: 150rpx;
				text-align: right;
				padding-right:20rpx ;
				text-align: center;
			}
			
			textarea{
				display: flex;
				flex: 1;
				border: 1px solid #C0C0C0;
				border-radius: 12rpx;
				font-size:28rpx ;
				height: 150rpx;
				padding: 10rpx;
			}
		}
		
		
		.giveMe_money {
			display: flex;
			border-radius: 30rpx;
			margin: 0 20rpx;
		
			.manner{
				width: 150rpx;
				height: 120rpx;
				line-height: 120rpx;
			}
			
		
			.payment{
				height: 100rpx;
				line-height: 100rpx;
				radio-group{
					display: flex;
					align-items: center;
					.payment_item{
						display: flex;
						align-items: center;
						margin-top: 5px;
						margin-right: 20rpx;
						.payment_name{
							margin-right: 20rpx;
						}
						.payment-radios:nth-child(1){
							margin-left: 60rpx;
								radio{
									display: block;
									margin: 0 auto;
									background-color: $main-color;
									transform: scale(0.7);
									color:rgba(0, 0, 0, 0.6);
									background-color:#fff;
								}
								
						}
					}
				}
			}
		}
		
		.money_button {
			width: 90%;
			height:90rpx;
			line-height: 90rpx;
			padding: 0;
			border: none;
			font-size: 32rpx;
			background-color: $main-color !important;
			margin: 30rpx auto;
		}
			
		button::after{
			border: none;
		}
		
		.warp {
			display: flex;
			// align-items: center;
			// justify-content: center;
			// position: relative;
			height: 100%;
		}
		
		.rect {
			width: 220px;
			height: 220px;
			background-color: #fff;
			// position: absolute;
			// left: 60px;
			margin: 0 auto;
			margin-top: 150rpx;
			border-radius: 100rpx;
			padding: 30rpx;
			box-sizing: border-box;
			
			.rect_item1{
				display: flex;
				font-size: 30rpx;
				
				image{
					width: 20px;
					height: 20px;
				}
				
				view{
					margin-left: 45rpx;
				}
			}
			
			.rect_item2{
				font-size: 30rpx;
				text-align: center;
			}
			
			.rect_item3{
				margin-top: 20rpx;
				text-align: center;
			}
			
			.keyboard{
				width: 90%;
				margin: 0 auto;
				margin-bottom: 15%;
			}
		}

		.icon-song {
			font-size: 55rpx;
		}

		.icon-jiantou {
			font-size: 55rpx;
		}

		.icon-qu {
			font-size: 55rpx;
		}

		.icon-xiangxiajiantou {
			font-size: 55rpx;
		}
	}
</style>
